<template>
  <div class="register-card">
    <div class="form">
      <div class="forgot-card-title">注册</div>

      <div class="form">
        <el-form ref="formRef" :model="formData" :rules="formRules" @submit.prevent>
          <el-form-item prop="username">
            <div class="forgot-card-subtitle">用户名</div>
            <el-input
              v-model.trim="formData.username"
              type="text"
              autocomplete="off"
              placeholder="用户昵称"
              maxlength="24"
            >
            </el-input>
          </el-form-item>

          <el-form-item prop="password">
            <div class="forgot-card-subtitle">设置密码</div>
            <el-input
              v-model.trim="formData.password"
              type="password"
              autocomplete="off"
              placeholder="输入密码"
              onkeyup="this.value=this.value.replace(/[^\w]/g,'');"
              show-password
              maxlength="24"
            >
            </el-input>
            <span class="tip">8位数以上数字和字母</span>
          </el-form-item>

          <el-form-item prop="repassword">
            <el-input
              v-model.trim="formData.repassword"
              type="password"
              autocomplete="off"
              placeholder="再次确认密码"
              onkeyup="this.value=this.value.replace(/[^\w]/g,'');"
              show-password
              maxlength="24"
            >
            </el-input>
          </el-form-item>
        </el-form>

        <div class="action">
          <button @click="handleSubmitClick">保存</button>
          <button @click="handleBackClick">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import useRouterJump from '@/hooks/useRouterJump'
import useLoginStore from '@/stores/login/login'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'

// ====== data
const formRef = ref<any>()
const formData = ref<any>({
  username: '',
  password: '',
  repassword: ''
})
const formRules = ref<any>({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { validator: checkPassword, trigger: 'blur' }
  ],
  repassword: [
    { required: true, message: '请再次确认密码', trigger: 'blur' },
    { validator: checkRePassword, trigger: 'blur' }
  ]
})

// ====== hooks
const loginStore = useLoginStore()
const { secret } = storeToRefs(loginStore)

// ====== methods
const handleBackClick = () => {
  loginStore.currentCardType = 'login'
}
const handleSubmitClick = () => {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      loginStore.registerAction(
        {
          secret: secret.value,
          nickname: formData.value.username,
          password: formData.value.password,
          password1: formData.value.repassword
        },
        () => {
          useRouterJump('/')
        }
      )
    } else {
      return false
    }
  })
}

// ====== tool
function checkPassword(rule: any, value: any, callback: any) {
  if (String(formData.value.password).length < 8) {
    callback(new Error('密码必须为8位以上数字和字母组成'))
  } else {
    callback()
  }
}
function checkRePassword(rule: any, value: any, callback: any) {
  if (formData.value.repassword !== formData.value.password) {
    callback(new Error('两次密码不一致'))
  } else {
    callback()
  }
}
</script>

<style lang="less" scoped>
.register-card {
  .forgot-card-title {
    font-size: 50px;
    font-weight: bold;
    color: #000000;
  }
  .forgot-card-subtitle {
    font-size: 27px;
    font-weight: bold;
    color: #000000;
    margin: 27px 0 15px 0;
  }
  .forgot-card-subtitle:last-of-type {
    margin-top: 0;
  }

  .form {
    width: 485px;

    :deep(.el-form-item) {
      margin-bottom: 49px;

      .tip {
        position: absolute;
        right: 0;
        bottom: -25px;
        font-size: 17px;
        font-weight: 500;
        color: #999999;
        line-height: 1;
      }

      .el-input {
        height: 55px;
        font-size: 24px;
      }

      .el-input-group__prepend,
      .el-input-group__append {
        background-color: #ffffff;
        box-shadow: none;
      }
    }
    :deep(.el-form-item:first-of-type) {
      margin-bottom: 10px;
    }

    .action {
      display: flex;

      button {
        display: flex;
        justify-content: center;
        align-items: center;
        background: none;
        border: none;
        width: 148px;
        height: 55px;
        border-radius: 9px;
        font-size: 24px;
        font-weight: 500;
        transition: all 0.3s ease;
      }
      button:first-of-type {
        background-color: #0075ff;
        color: #ffffff;
        margin-right: 56px;
      }
      button:last-of-type {
        background-color: #ffffff;
        color: #999999;
        border: 1px solid #d2d2d2;
      }
      button:hover {
        opacity: 0.7;
      }
    }
  }
}
</style>
